<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

        //对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版
        //如下是定时器版
        // 不会立即执行，而是等到time之后才执行，然后每个time执行一次
        function throttle(fn,time){
            let canRun=true
            return function(){
                if(!canRun)return
                canRun=false
                setTimeout(()=>{
                    fn()
                    canRun=true
                },time)
            }
        }
        function sayHi(){
            console.log('节流')
        }

        window.addEventListener('resize',throttle(sayHi,1000))


        //如下是时间戳版
        //其原理是初始化一个变量为0，然后取当前时间戳，如果当前时间戳减去这个变量大于等待时间time，那么就执行函数，并且将当前时间赋值给变量
        //这是立即执行函数，并且每个time执行一次。
        function throttle1(fn,time){
            let previous=0
            return function(){
                let now=Date.now()
                if(now-previous > time){
                    fn()
                    previous=now
                }
            }
        }
        function sayHi1(){
            console.log('节流1')
        }
        window.addEventListener('resize',throttle1(sayHi1,1000))
    </script>
</body>
</html>